<template>
  <el-card class="container">
    <h1>《剪刀石头布》</h1>
    <div class="head">
      <el-button @click="restart">重新开始</el-button>
      <el-tag type="primary" size="large">{{ currentDifficulty?.label ? currentDifficulty.label : '难度' }}</el-tag>
    </div>

    <el-card class="con-box flex-center" v-show="cardShow === 0">
      <span>请选择难度：</span>
      <el-select
        v-model="currentDifficulty"
        @change="handleChange"
        value-key="value"
        placeholder="请选择"
        style="width: 100px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item"
        />
      </el-select>
      <el-button type="primary" style="margin-left: 10px" @click="startGame">开始</el-button>
    </el-card>

    <el-card class="con-box flex-center" v-show="cardShow === 1">
      <div class="flex-center">
          <el-image class="img" :src="randomImgUrl" fill="cover" :style="{ transform: 'scaleX(-1)' }"></el-image>
          <el-image class="vs-img" :src="VSImg" fill="cover"></el-image>
          <el-image class="img" :src="myRandomImgUrl" fill="cover"></el-image>
      </div>
      <div class="text-load">{{ loadingText }}</div>
    </el-card>
    <el-card class="con-box flex-center" v-show="cardShow === 2">
      <div class="text-res">{{ loadingText }}</div>
    </el-card>
    
    <div class="btn-box">
      <el-button class="btn" @click="handleClick(0)" :disabled="disabledList[0]" size="large">剪刀</el-button>
      <el-button class="btn" @click="handleClick(1)" :disabled="disabledList[1]" size="large">石头</el-button>
      <el-button @click="handleClick(2)" :disabled="disabledList[2]" size="large">布</el-button>
    </div>
    

  </el-card>
  
</template>

<script setup>
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import img0 from './img/0.jpg'
import img1 from './img/1.jpg'
import img2 from './img/2.jpg'
import VSImg from './img/vs.jpg'
import JQRImg from './img/jqr.jpg'
import WENImg from './img/wen.png'
import { getRandomNumber, determineWinner } from './utils'
const options = [
  {
    value: 0,
    label: '简单',
    type: 'primary'
  },
  {
    value: 1,
    label: '困难',
    type: 'success'
  },
  {
    value: 2,
    label: '地狱',
    type: 'danger'
  },
]
// 当前难度
const currentDifficulty = ref()
const handleChange = (val) => {
  console.log(val)
}

// 剪刀-石头-布
const imgList = [img0, img1, img2]

// 电脑当前出拳
const comCurrentNum = ref(null)
const randomImgUrl = computed(() => {
  return imgList[comCurrentNum.value] ? imgList[comCurrentNum.value] : JQRImg
})

// 当前定时器
const intervalId = ref()
// 是否正在出拳
const isDrawing = ref(false)
// 开始或关闭随机图片
const randomDraw = () => {
  if(!isDrawing.value) {
    isDrawing.value = true
    intervalId.value = setInterval(() => {
      comCurrentNum.value = getRandomNumber(0, 2)
    }, 100);
  } else {
    clearInterval(intervalId.value)
    isDrawing.value = false
  }
}

// 我的出拳
const myCurrentNum = ref()
const myRandomImgUrl = computed(() => {
  return imgList[myCurrentNum.value] ? imgList[myCurrentNum.value] : WENImg
})

const handleClick = (num) => {
  console.log(num);
  myCurrentNum.value = num
  if(currentDifficulty.value.value == 1) {
    let res = determineWinner(myCurrentNum.value, comCurrentNum.value)
    console.log(res);
    setTimeout(() => {
      if(res === 0) {
        loadingText.value = textList.lose
      } else if(res === 1) {
        loadingText.value = textList.win
      } else if(res === 2) {
        loadingText.value = textList.draw
      }
      cardShow.value = 2
    }, 1000)
    
  }
}

const disabledList = ref([true, true, true])

// 开始游戏
const startGame = () => {
  if(!currentDifficulty.value) return ElMessage.warning('请选择难度')

  if(currentDifficulty.value.value == 0) {
    // cardShow.value = 1
    // loadingText.value = textList.loading
    // setTimeout(() => {
    //   randomDraw()
    // }, 1000)
    // setTimeout( () => {
    //   randomDraw()
    //   loadingText.value = textList.turn
    //   disabledList.value = [false, false, false]
    // }, 2000)

    return ElMessage.warning('菜鸟才选简单模式。')
  }
  if(currentDifficulty.value.value == 1) {
    // 切换到图片
    cardShow.value = 1
    loadingText.value = textList.loading
    setTimeout(() => {
      randomDraw()
    }, 1000)
    setTimeout(() => {
      randomDraw()
      loadingText.value = textList.turn
      let disList = [true, true, true]
      if(comCurrentNum.value === 0) {
        disList[2] = false
      } else if(comCurrentNum.value === 1) {
        disList[0] = false
      } else if(comCurrentNum.value === 2) {
        disList[1] = false
      }
      disabledList.value = disList
    }, 2000)
  }
  if(currentDifficulty.value.value == 2) {
    cardShow.value = 2
    loadingText.value = textList.lose
  }
  
}

// 重新开始
const restart = () => {
  cardShow.value = 0
  comCurrentNum.value = null
  myCurrentNum.value = null
  disabledList.value = [true, true, true]
  loadingText.value = ''
}

const textList = {
  loading: '等待机器人出拳...',
  turn: '轮到你了',
  win: '你赢了',
  lose: '你输了！',
  draw: '平局',
}
const loadingText = ref()


// 
const cardShow = ref(0)


</script>

<style lang="less" scoped>
.container {
  // width: 50%;
  margin: 0 auto;
}
h1 {
  text-align: center;
}
.head {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.img {
  width: 100px;
  height: 100px;
  background-color: #fff;
}
.vs-img {
  width: 50px;
  height: 50px;
}
.text-load {
  text-align: center;
}
.text-res {
  text-align: center;
  font-size: 20px;
  color: red;
}
.btn-box {
  display: flex;
  justify-content: center;
  margin: 20px;
}
.con-box {
  height: 200px;
}
.flex-center {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
}
</style>